{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>列表</li>
  </ol>
<section class="demo-section">
<div id="pageContent">

<article><p>列表视图用于展示一组包含图文的内容。</p></article>






<section><header><h3>结构</h3></header><article><p>列表使用 <code>.list</code> 作为父级容器，并使用如下特殊类标记子容器：</p><div class="table-responsive"><table class="table">
  <tbody>
    <tr>
      <td style="width: 100px"><code>&lt;header&gt;</code></td>
      <td style="width: 80px">头部</td>
      <td>标题等信息</td>
    </tr>
    <tr>
      <td><code>.items</code></td>
      <td>列表项组</td>
      <td>可以在 <code>.list</code> 内堆叠多个列表项组。</td>
    </tr>
    <tr>
      <td><code>&lt;footer&gt;</code></td>
      <td>底部</td>
      <td>显示分页信息等。</td>
    </tr>
  </tbody>
</table></div><p>一般 HTML 结构如下：</p><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="com">&lt;!-- 列表头部 --&gt;</span><span class="pln">
  </span><span class="tag">&lt;header&gt;</span><span class="pln">
    </span><span class="tag">&lt;h1&gt;</span><span class="pln">列表标题</span><span class="tag">&lt;/h1&gt;</span><span class="pln">
  </span><span class="tag">&lt;/header&gt;</span><span class="pln">
  </span><span class="com">&lt;!-- 列表项组 --&gt;</span><span class="pln">
  </span><span class="tag">&lt;section</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"items"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
    ...
  </span><span class="tag">&lt;/section&gt;</span><span class="pln">
  </span><span class="com">&lt;!-- 列表底部 --&gt;</span><span class="pln">
  </span><span class="tag">&lt;footer&gt;</span><span class="pln">
    </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pager pager-justify"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"previous"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-arrow-left"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 上一页</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
      </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"next disabled"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">没有下一页 </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-arrow-right"</span><span class="tag">&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
  </span><span class="tag">&lt;/footer&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><p>列表项组 <code>.items</code> 也可以脱离列表容器 <code>.list</code> 单独使用。</p></article></section>




















<section><header><h3>列表项</h3></header><article><p>为用作列表项的元素添加 <code>.item</code> 类，所有列表项都必须作为列表项组（<code>.items</code>）的直接子元素。</p><p>列表项内可以包含以下特殊类：</p><ul>
<li><code>.item-heading</code>，作为列表项标题容器；</li>
<li><code>.item-content</code>，作为列表附加内容容器；</li>
<li><code>.item-footer</code>，作为列表底部信息容器；</li>
<li><code>.media</code>，作为缩略图容器，通常放置在 <code>.item-content</code> 内，和 <code>.pull-left</code> 或 <code>.pull-right</code> 一起使用。</li>
</ul><p>###</p><div class="example">
  <div class="items">
    <div class="item">
      <div class="item-heading">
        <div class="pull-right label label-success">维基</div>
        <h4><a href="###">HTML5 发展历史</a></h4>
      </div>
      <div class="item-content">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
      <div class="item-footer">
        <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
      </div>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"items"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-heading"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right label label-success"</span><span class="tag">&gt;</span><span class="pln">维基</span><span class="tag">&lt;/div&gt;</span><span class="pln">
      </span><span class="tag">&lt;h4&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">HTML5 发展历史</span><span class="tag">&lt;/a&gt;&lt;/h4&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-content"</span><span class="tag">&gt;</span><span class="pln">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-footer"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-comments"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 243</span><span class="tag">&lt;/a&gt;</span><span class="pln"> &amp;nbsp; </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;</span><span class="pln">2013-11-11 16:14:37</span><span class="tag">&lt;/span&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><h4>包含缩略图</h4><p>在 <code>.item-content</code> 内使用 <code>.media</code> 包裹图片作为缩略图。</p><p>在 <code>.media</code> 上使用 <code>.pull-left</code> 或 <code>.pull-right</code> 来让缩略图居左或居右放置。此时默认情况下缩略图最大宽度为 <code>150px</code>，如果要更改缩略图大学，你可以手动为缩略图应用样式。</p><div class="example">
  <div class="items">
    <div class="item">
      <div class="item-heading">
        <div class="pull-right label label-success">维基</div>
        <h4><a href="###">HTML5 发展历史</a></h4>
      </div>
      <div class="item-content">
        <div class="media pull-left"><img src="__IMG__/320x320icon.png" alt=""></div>
        <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
      </div>
      <div class="item-footer">
        <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
      </div>
    </div>
    <div class="item">
      <div class="item-heading">
        <div class="pull-right label label-success">维基</div>
        <h4><a href="###">HTML5 发展历史</a></h4>
      </div>
      <div class="item-content">
        <div class="media pull-right"><img src="__IMG__/320x320icon.png" alt=""></div>
        <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
      </div>
      <div class="item-footer">
        <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
      </div>
    </div>
    <div class="item">
      <div class="item-heading">
        <div class="pull-right label label-success">维基</div>
        <h4><a href="###">HTML5 发展历史</a></h4>
      </div>
      <div class="item-content">
        <div class="media"><img src="__IMG__/320x320icon.png" alt=""></div>
        <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
      </div>
      <div class="item-footer">
        <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
      </div>
    </div>
  </div>
</div><pre class="pre-scrollable linenums prettyprint prettyprinted" style=""><ol class="linenums"><li class="L0"><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"items"</span><span class="tag">&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item"</span><span class="tag">&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-heading"</span><span class="tag">&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right label label-success"</span><span class="tag">&gt;</span><span class="pln">维基</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;h4&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">HTML5 发展历史</span><span class="tag">&lt;/a&gt;&lt;/h4&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-content"</span><span class="tag">&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"media pull-left"</span><span class="tag">&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img2.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;&lt;/div&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-footer"</span><span class="tag">&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-comments"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 243</span><span class="tag">&lt;/a&gt;</span><span class="pln"> &amp;nbsp; </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;</span><span class="pln">2013-11-11 16:14:37</span><span class="tag">&lt;/span&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item"</span><span class="tag">&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-heading"</span><span class="tag">&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right label label-success"</span><span class="tag">&gt;</span><span class="pln">维基</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;h4&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">HTML5 发展历史</span><span class="tag">&lt;/a&gt;&lt;/h4&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-content"</span><span class="tag">&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"media pull-right"</span><span class="tag">&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img2.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;&lt;/div&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-footer"</span><span class="tag">&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-comments"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 243</span><span class="tag">&lt;/a&gt;</span><span class="pln"> &amp;nbsp; </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;</span><span class="pln">2013-11-11 16:14:37</span><span class="tag">&lt;/span&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item"</span><span class="tag">&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-heading"</span><span class="tag">&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right label label-success"</span><span class="tag">&gt;</span><span class="pln">维基</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;h4&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">HTML5 发展历史</span><span class="tag">&lt;/a&gt;&lt;/h4&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-content"</span><span class="tag">&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"media"</span><span class="tag">&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/slide1.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;&lt;/div&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-footer"</span><span class="tag">&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-comments"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 243</span><span class="tag">&lt;/a&gt;</span><span class="pln"> &amp;nbsp; </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;</span><span class="pln">2013-11-11 16:14:37</span><span class="tag">&lt;/span&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="tag">&lt;/div&gt;</span></code></li></ol></pre><h4>鼠标悬停效果</h4><p>为 <code>.items</code> 添加  <code>.items-hover</code> 类可以为列表项添加鼠标悬停效果。</p><div class="example">
  <div class="items items-hover">
    <div class="item">
      <div class="item-heading">
        <div class="pull-right label label-success">维基</div>
        <h4><a href="###">HTML5 发展历史</a></h4>
      </div>
      <div class="item-content">
        <div class="media pull-right"><img src="__IMG__/320x320icon.png" alt=""></div>
        <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
      </div>
      <div class="item-footer">
        <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
      </div>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"items items-hover"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-heading"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right label label-success"</span><span class="tag">&gt;</span><span class="pln">维基</span><span class="tag">&lt;/div&gt;</span><span class="pln">
      </span><span class="tag">&lt;h4&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">HTML5 发展历史</span><span class="tag">&lt;/a&gt;&lt;/h4&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-content"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"media pull-right"</span><span class="tag">&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img2.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-footer"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-comments"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 243</span><span class="tag">&lt;/a&gt;</span><span class="pln"> &amp;nbsp; </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;</span><span class="pln">2013-11-11 16:14:37</span><span class="tag">&lt;/span&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>





<section><header><h3>综合示例</h3></header><article><div class="example">
  <div class="list">
    <header>
      <h3><i class="icon-list-ul"></i> 最新动态 <small>更新 123 条</small></h3>
    </header>
    <div class="items items-hover">
      <div class="item">
        <div class="item-heading">
          <div class="pull-right"><span class="text-muted">2013-11-11 16:14:37</span> &nbsp; <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a></div>
          <h4><a href="###">HTML5 发展历史</a></h4>
        </div>
        <div class="item-content">
          <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
        </div>
      </div>
      <div class="item">
        <div class="item-heading">
          <div class="pull-right label label-success">维基</div>
          <h4><a href="###">HTML5 发展历史</a></h4>
        </div>
        <div class="item-content">
          <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
        </div>
        <div class="item-footer">
          <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
        </div>
      </div>
      <div class="item">
        <div class="item-heading">
          <div class="pull-right label label-success">维基</div>
          <h4><a href="###">HTML5 发展历史</a></h4>
        </div>
        <div class="item-content">
          <div class="media pull-right"><img src="__IMG__/320x320icon.png" alt=""></div>
          <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
        </div>
        <div class="item-footer">
          <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
        </div>
      </div>
      <div class="item">
        <div class="item-heading">
          <div class="pull-right"><a href="###"><i class="icon-pencil"></i> 编辑</a> &nbsp;<a href="#"><i class="icon-remove"></i> 删除</a></div>
          <h4><span class="label label-success">维基</span> <a href="###">HTML5 发展历史</a></h4>
        </div>
        <div class="item-content">
          <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
        </div>
        <div class="item-footer">
          <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
        </div>
      </div>
    </div>
    <footer>
      <ul class="pager">
        <li class="previous"><a href="#">« 上一页</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">⋯</a></li>
        <li><a href="#">6</a></li>
        <li class="active"><a href="#">7</a></li>
        <li><a href="#">8</a></li>
        <li><a href="#">9</a></li>
        <li><a href="#">⋯</a></li>
        <li><a href="#">12</a></li>
        <li class="next"><a href="#">下一页 »</a></li>
      </ul>
    </footer>
  </div>
</div><pre class="pre-scrollable linenums prettyprint prettyprinted" style=""><ol class="linenums"><li class="L0"><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list"</span><span class="tag">&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;header&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;h3&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-list-ul"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 最新动态 </span><span class="tag">&lt;small&gt;</span><span class="pln">更新 123 条</span><span class="tag">&lt;/small&gt;&lt;/h3&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/header&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"items items-hover"</span><span class="tag">&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item"</span><span class="tag">&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-heading"</span><span class="tag">&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right"</span><span class="tag">&gt;&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;</span><span class="pln">2013-11-11 16:14:37</span><span class="tag">&lt;/span&gt;</span><span class="pln"> &amp;nbsp; </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-comments"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 243</span><span class="tag">&lt;/a&gt;&lt;/div&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;h4&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">HTML5 发展历史</span><span class="tag">&lt;/a&gt;&lt;/h4&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-content"</span><span class="tag">&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item"</span><span class="tag">&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-heading"</span><span class="tag">&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right label label-success"</span><span class="tag">&gt;</span><span class="pln">维基</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;h4&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">HTML5 发展历史</span><span class="tag">&lt;/a&gt;&lt;/h4&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-content"</span><span class="tag">&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-footer"</span><span class="tag">&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-comments"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 243</span><span class="tag">&lt;/a&gt;</span><span class="pln"> &amp;nbsp; </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;</span><span class="pln">2013-11-11 16:14:37</span><span class="tag">&lt;/span&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item"</span><span class="tag">&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-heading"</span><span class="tag">&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right label label-success"</span><span class="tag">&gt;</span><span class="pln">维基</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;h4&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">HTML5 发展历史</span><span class="tag">&lt;/a&gt;&lt;/h4&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-content"</span><span class="tag">&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"media pull-right"</span><span class="tag">&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img2.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;&lt;/div&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-footer"</span><span class="tag">&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-comments"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 243</span><span class="tag">&lt;/a&gt;</span><span class="pln"> &amp;nbsp; </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;</span><span class="pln">2013-11-11 16:14:37</span><span class="tag">&lt;/span&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item"</span><span class="tag">&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-heading"</span><span class="tag">&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-pencil"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 编辑</span><span class="tag">&lt;/a&gt;</span><span class="pln"> &amp;nbsp;</span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-remove"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 删除</span><span class="tag">&lt;/a&gt;&lt;/div&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;h4&gt;&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label label-success"</span><span class="tag">&gt;</span><span class="pln">维基</span><span class="tag">&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">HTML5 发展历史</span><span class="tag">&lt;/a&gt;&lt;/h4&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-content"</span><span class="tag">&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-footer"</span><span class="tag">&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-comments"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 243</span><span class="tag">&lt;/a&gt;</span><span class="pln"> &amp;nbsp; </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;</span><span class="pln">2013-11-11 16:14:37</span><span class="tag">&lt;/span&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;footer&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pager"</span><span class="tag">&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"previous"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">« 上一页</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">1</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">⋯</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">6</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"active"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">7</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">8</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">9</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">⋯</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">12</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"next"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">下一页 »</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/ul&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/footer&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="tag">&lt;/div&gt;</span></code></li></ol></pre></article></section>





<section><header><h3>更紧凑的列表</h3></header><article><p>通过为 <code>.list</code> 添加 <code>list-condensed</code> 类来获得更加紧凑的列表视图，适合放置在没有内边距的容器内。</p><div style="padding: 0" class="example">
  <div class="list list-condensed">
    <header>
      <h3><i class="icon-list-ul"></i> 最新动态 <small>更新 123 条</small></h3>
    </header>
    <div class="items items-hover">
      <div class="item">
        <div class="item-heading">
          <div class="pull-right"><span class="text-muted">2013-11-11 16:14:37</span> &nbsp; <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a></div>
          <h4><a href="###">HTML5 发展历史</a></h4>
        </div>
        <div class="item-content">
          <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
        </div>
      </div>
      <div class="item">
        <div class="item-heading">
          <div class="pull-right label label-success">维基</div>
          <h4><a href="###">HTML5 发展历史</a></h4>
        </div>
        <div class="item-content">
          <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
        </div>
        <div class="item-footer">
          <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
        </div>
      </div>
      <div class="item">
        <div class="item-heading">
          <div class="pull-right label label-success">维基</div>
          <h4><a href="###">HTML5 发展历史</a></h4>
        </div>
        <div class="item-content">
          <div class="media pull-right"><img src="__IMG__/320x320icon.png" alt=""></div>
          <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
        </div>
        <div class="item-footer">
          <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
        </div>
      </div>
      <div class="item">
        <div class="item-heading">
          <div class="pull-right"><a href="###"><i class="icon-pencil"></i> 编辑</a> &nbsp;<a href="#"><i class="icon-remove"></i> 删除</a></div>
          <h4><span class="label label-success">维基</span> <a href="###">HTML5 发展历史</a></h4>
        </div>
        <div class="item-content">
          <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
        </div>
        <div class="item-footer">
          <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
        </div>
      </div>
    </div>
    <footer>
      <ul class="pager">
        <li class="previous"><a href="#">« 上一页</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">⋯</a></li>
        <li><a href="#">6</a></li>
        <li class="active"><a href="#">7</a></li>
        <li><a href="#">8</a></li>
        <li><a href="#">9</a></li>
        <li><a href="#">⋯</a></li>
        <li><a href="#">12</a></li>
        <li class="next"><a href="#">下一页 »</a></li>
      </ul>
    </footer>
  </div>
</div><pre class="pre-scrollable linenums prettyprint prettyprinted" style=""><ol class="linenums"><li class="L0"><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list list-condensed"</span><span class="tag">&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;header&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;h3&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-list-ul"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 最新动态 </span><span class="tag">&lt;small&gt;</span><span class="pln">更新 123 条</span><span class="tag">&lt;/small&gt;&lt;/h3&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/header&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"items items-hover"</span><span class="tag">&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item"</span><span class="tag">&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-heading"</span><span class="tag">&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right"</span><span class="tag">&gt;&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;</span><span class="pln">2013-11-11 16:14:37</span><span class="tag">&lt;/span&gt;</span><span class="pln"> &amp;nbsp; </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-comments"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 243</span><span class="tag">&lt;/a&gt;&lt;/div&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;h4&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">HTML5 发展历史</span><span class="tag">&lt;/a&gt;&lt;/h4&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-content"</span><span class="tag">&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item"</span><span class="tag">&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-heading"</span><span class="tag">&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right label label-success"</span><span class="tag">&gt;</span><span class="pln">维基</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;h4&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">HTML5 发展历史</span><span class="tag">&lt;/a&gt;&lt;/h4&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-content"</span><span class="tag">&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-footer"</span><span class="tag">&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-comments"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 243</span><span class="tag">&lt;/a&gt;</span><span class="pln"> &amp;nbsp; </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;</span><span class="pln">2013-11-11 16:14:37</span><span class="tag">&lt;/span&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item"</span><span class="tag">&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-heading"</span><span class="tag">&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right label label-success"</span><span class="tag">&gt;</span><span class="pln">维基</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;h4&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">HTML5 发展历史</span><span class="tag">&lt;/a&gt;&lt;/h4&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-content"</span><span class="tag">&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"media pull-right"</span><span class="tag">&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img2.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;&lt;/div&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-footer"</span><span class="tag">&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-comments"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 243</span><span class="tag">&lt;/a&gt;</span><span class="pln"> &amp;nbsp; </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;</span><span class="pln">2013-11-11 16:14:37</span><span class="tag">&lt;/span&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item"</span><span class="tag">&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-heading"</span><span class="tag">&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-pencil"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 编辑</span><span class="tag">&lt;/a&gt;</span><span class="pln"> &amp;nbsp;</span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-remove"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 删除</span><span class="tag">&lt;/a&gt;&lt;/div&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;h4&gt;&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label label-success"</span><span class="tag">&gt;</span><span class="pln">维基</span><span class="tag">&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">HTML5 发展历史</span><span class="tag">&lt;/a&gt;&lt;/h4&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-content"</span><span class="tag">&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"item-footer"</span><span class="tag">&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-comments"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 243</span><span class="tag">&lt;/a&gt;</span><span class="pln"> &amp;nbsp; </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;</span><span class="pln">2013-11-11 16:14:37</span><span class="tag">&lt;/span&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;footer&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pager"</span><span class="tag">&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"previous"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">« 上一页</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">1</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">⋯</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">6</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"active"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">7</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">8</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">9</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">⋯</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">12</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"next"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">下一页 »</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/ul&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/footer&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="tag">&lt;/div&gt;</span></code></li></ol></pre></article></section></div>


</section>
{/block}